<template>
	<van-cell class="momment-item">
		<van-image round :src="comment.aut_photo" fit="cover" slot="icon" class="avatar" />
		<div slot="title">
			<div class="title-wrap">
				<div class="name">{{ comment.aut_name }}</div>
				
				<div class="like-wrap">
					<van-icon :name="comment.is_liking ? 'good-job' : 'good-job-o'" class="like-icon" @click="onCommentLike" />
					<span class="like-cout">{{ comment.like_count }}</span>
				</div>
			</div>
			
			<div class="content">{{ comment.content }}</div>
			<div>
				<span class="pubdate">{{ comment.pubdate | datetime('MM:DD HH:mm') }}</span>
				<van-button round size="mini" class="reply-btn" @click="$emit('reply-click',comment)">{{ comment.reply_count }} 回复</van-button>
			</div>
		</div>
		
		
	</van-cell>
</template>

<script>
	import { addCommentLike,deleteCommentLike } from '../../../utils/comment.js'
	
	export default {
		name:'CommentItem',
		props: {
			comment:{
				type:Object,
				required:true
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			async onCommentLike() {
				if(this.comment.is_liking) {
					//已点赞
					await deleteCommentLike(this.comment.com_id.toString())
					this.comment.like_count -= 1
				}else {
					//未点赞
					await addCommentLike(this.comment.com_id.toString())
					this.comment.like_count += 1
				}
				this.comment.is_liking = !this.comment.is_liking
				
			}
		}
	}
</script>

<style scoped="scoped">
	.title-wrap {
		display: flex;
		justify-content: space-between;
	}
	.avatar {
		width: 35px;
		height: 35px;
		margin-right: 13px;
	}
	.name {
		font-size: 14px;
		color: #406599;
	}
	.content {
		font-size: 16px;
		color: #222222;
	}
	.pubdate {
		font-size: 9px;
		margin-right: 14px;
	}
	.reply-btn {
		width: 50px;
		height: 18px;
	}
</style>
